<template>
  <div>
    <div class="title">
      <h3>事项登记</h3>
    </div>
    <el-form ref="postMessage" :model="postMessage" label-width="90px" class="Num1" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="上报人：" prop="reportPerson">
            <el-input v-model="postMessage.reportPerson" size="small" maxlength="10"></el-input> </el-form-item
        ></el-col>
        <el-col :span="4"> </el-col>
        <el-col :span="6"
          ><el-form-item label="事件电话：" class="from-item" prop="reportPhone">
            <el-input v-model="postMessage.reportPhone" size="small" maxlength="11"></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="发生地：" class="from-item" prop="location">
            <el-input v-model="postMessage.location" size="small" maxlength="10"></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <el-form-item label="活动区域:" prop="gridId">
            <el-select v-model="postMessage.gridId" placeholder="所在网格" size="small" ref="select">
              <el-option
                v-for="item in region"
                :key="item.id"
                :label="item.gridName"
                :value="item.id"
                @click.native="
                  () => {
                    paste(item)
                  }
                "
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <el-form-item label="问题类型:" prop="subtypeId">
            <el-cascader
              ref="cascader"
              v-model="value"
              :options="classification"
              :props="{
                expandTrigger: 'hover',
                label: 'text',
                value: 'value',
                number: 'number',
                children: 'children',
              }"
              @change="handleChange"
              size="small"
            ></el-cascader>
            <!-- </el-select> -->
          </el-form-item></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <el-form-item label="问题描述:" prop="mdescribe">
            <el-input
              type="textarea"
              maxlength="50"
              placeholder="请限制字数在50个以内"
              v-model="postMessage.mdescribe"
              show-word-limit
              resize="none"
              :rows="5"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"> </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <el-form-item label="派向部门:" prop="responsibilityId">
            <el-select v-model="postMessage.responsibilityId" placeholder="请选择" size="small">
              <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.roleName"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><el-button type="primary" size="small" @click="dialogVisible = true">确定</el-button></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
      </el-row>
    </el-form>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>确定提交吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/api'
import * as admin from '@/api/admin'
import Seats from '@/api/Seats'
import superadmin from '@/api/superadmin'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('该项不能为空！'))
      } else {
        if (value !== '') {
          callback()
        }
      }
    }
    return {
      dialogVisible: false,
      showfalse: false,
      value: [],
      title: [],
      postMessage: {
        grid: '',
        gridId: '',
        location: '',
        subTypeNumber: '',
        matterSource: '',
        mdescribe: '',
        reportPerson: '',
        reportPhone: '',
        responsibilityId: '',
        subtypeId: '',
        typeId: '',
        typeNumber: '',
      },
      rules: {
        reportPerson: [{ required: true, validator: validatePass, trigger: 'blur' }],
        reportPhone: [{ required: true, validator: validatePass, trigger: 'blur' }],
        location: [{ required: true, validator: validatePass, trigger: 'blur' }],
        gridId: [{ required: true, validator: validatePass, trigger: 'change' }],
        subtypeId: [{ required: true, validator: validatePass, trigger: 'change' }],
        mdescribe: [{ required: true, validator: validatePass, trigger: 'blur' }],
        responsibilityId: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
      region: [],
      classification: [],
      options: [],
    }
  },
  created() {
    this.getposition()
    this.RolePersonnel()
    this.ProblemClassification()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    RolePersonnel() {
      admin.RolePersonnel({}).then(res => {
        this.options = res.data
      })
    },
    ProblemClassification() {
      Seats.classification().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            let lItem = {
              text: item.typeName,
              value: item.id,
              number: item.number,
              children: [],
            }
            item.subTypeDTOS.forEach(items => {
              lItem.children.push({
                text: items.subTypeName,
                value: item.id + '-' + items.id,
                number: items.number,
                subtypeDescription: items.subtypeDescription,
              })
            })
            this.classification.push(lItem)
          })
        }
      })
    },
    getposition() {
      superadmin.patrol(this.current, this.limit).then(e => {
        this.region = e.data.List.records
      })
    },
    paste(val) {
      this.postMessage.grid = val.gridName
    },
    handleChange(val) {
      let nodesObj = this.$refs['cascader'].getCheckedNodes()
      this.postMessage.typeNumber = nodesObj[0].parent.data.number
      this.postMessage.subTypeNumber = nodesObj[0].data.number
      let arr = val[1].split('-')
      this.postMessage.typeId = val[0]
      this.postMessage.subtypeId = arr[1]
    },
    Submit() {
      this.$refs['postMessage'].validate(valid => {
        if (valid) {
          api.Escalation(this.postMessage).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '提交成功!',
              })
              this.postMessage = {
                grid: '',
                location: '',
                matterSource: '',
                mdescribe: '',
                reportPerson: '',
                reportPhone: '',
                responsibilityId: '',
                subtypeId: '',
                typeId: '',
              }
              this.value = ''
            }
            this.dialogVisible = false
          })
        } else {
          this.dialogVisible = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './register.scss';
</style>
